// Inter-stage 变量在顶点着色器和片段着色器之间发挥作用。
// Inter-stage 变量最常用于在三角形内进行纹理坐标插值
// 与 WebGPU 中的几乎所有功能一样，顶点着色器和片段着色器之间是通过索引连接的。
// 对于 Inter-stage 变量，它们也是通过 location 索引进行连接。
// 像素坐标由像素边缘指定。而提供给片段着色器的值则是像素的中心坐标。
struct VertexOutput {
    // 该字段不是 Inter-stage 变量，它是一个内置变量(builtin)。
    // @builtin(position) 在顶点着色器和片段着色器中的意义是不同的。
    // 在顶点着色器中，@builtin(position) 是 GPU 绘制三角形/线/点所需的输出。
    // 在片段着色器中，@builtin(position) 是一个输入。它是片段着色器当前被要求计算颜色的像素坐标。
    @builtin(position) position: vec4f,
    @location(0) color: vec4f,
};

@vertex fn vs(
    @builtin(vertex_index) vertexIndex : u32
) -> VertexOutput {
    let pos = array(
        vec2f( 0.0,  0.5),  // top center
        vec2f(-0.5, -0.5),  // bottom left
        vec2f( 0.5, -0.5)   // bottom right
    );

    var color = array<vec4f, 3>(
        vec4f(1, 0, 0, 1), // red
        vec4f(0, 1, 0, 1), // green
        vec4f(0, 0, 1, 1), // blue
    );
    
    var output: VertexOutput;
    output.position = vec4f(pos[vertexIndex], 0.0, 1.0);
    output.color = color[vertexIndex];
    return output;
}

@fragment fn fs(fsInput: VertexOutput) -> @location(0) vec4f {
    return fsInput.color;
}